﻿<MExpansionPanels>
    <MExpansionPanel>
        <MExpansionPanelHeader>
            <MRow NoGutters>
                <MCol Cols="4">
                    Trip name
                </MCol>
                <MCol Cols="8"
                      Class="text--secondary">
                    <FadeTransition LeaveAbsolute>
                        <IfTransitionElement Tag="span" Value="context">
                            Enter a name for the trip
                        </IfTransitionElement>
                        <IfTransitionElement Tag="span" Value="!context">
                            @trip.name
                        </IfTransitionElement>
                    </FadeTransition>
                </MCol>
            </MRow>
        </MExpansionPanelHeader>
        <MExpansionPanelContent>
            <MTextField @bind-Value="@trip.name"
                        placeholder="Caribbean Cruise">
            </MTextField>
        </MExpansionPanelContent>
    </MExpansionPanel>

    <MExpansionPanel>
        <MExpansionPanelHeader>
            <MRow NoGutters>
                <MCol Cols="4">
                    Location
                </MCol>
                <MCol Cols="8"
                      Class="text--secondary">
                    <FadeTransition LeaveAbsolute>
                        <IfTransitionElement Tag="span" Value="context">
                            Select trip destination
                        </IfTransitionElement>
                        <IfTransitionElement Tag="span" Value="!context">
                            @trip.location
                        </IfTransitionElement>
                    </FadeTransition>
                </MCol>
            </MRow>
        </MExpansionPanelHeader>
        <MExpansionPanelContent>
            <MRow NoGutters>
                <MSpacer></MSpacer>
                <MCol Cols="5">
                    <MSelect @bind-Value="trip.location"
                             Items="locations"
                             ItemValue="item => item"
                             ItemText="item => item"
                             Chips
                             Flat
                             Solo>
                    </MSelect>
                </MCol>

                <MDivider Vertical
                          Class="mx-4">
                </MDivider>

                <MCol Cols="3">
                    Select your destination of choice
                    <br>
                    <a href="/components/expansion-panels">Learn more</a>
                </MCol>
            </MRow>

            <MCardActions>
                <MSpacer></MSpacer>
                <MButton Text
                         Color="secondary">
                    Cancel
                </MButton>
                <MButton Text
                         Color="primary">
                    Save
                </MButton>
            </MCardActions>
        </MExpansionPanelContent>
    </MExpansionPanel>

    <MExpansionPanel>
        <MExpansionPanelHeader>
            <MRow NoGutters>
                <MCol Cols="4">
                    Start and end dates
                </MCol>
                <MCol Cols="8"
                      Class="text--secondary">
                    <FadeTransition LeaveAbsolute>
                        <IfTransitionElement Tag="span" Value="context">
                            When do you want to travel?
                        </IfTransitionElement>
                        @*TODO: refactor BRow to support IfElse*@
                        <IfTransitionElement Tag="div" Style="width:100%" Value="!context">
                            <MRow NoGutters
                                  Style="width: 100%">
                                <MCol Cols="6">
                                    Start date: @(trip.start ?? "Not set")
                                </MCol>
                                <MCol Cols="6">
                                    End date: @(trip.end ?? "Not set")
                                </MCol>
                            </MRow>
                        </IfTransitionElement>
                    </FadeTransition>
                </MCol>
            </MRow>
        </MExpansionPanelHeader>
        <MExpansionPanelContent>
            <MRow Justify="JustifyTypes.SpaceAround"
                  NoGutters>
                <MCol Cols="3">
                    <MMenu @bind-Value="visible"
                           CloseOnContentClick="false"
                           OffsetY
                           MinWidth="290">
                        <ActivatorContent>
                            <MTextField @bind-Value="trip.start"
                                        Label="Start date"
                                        PrependIcon="mdi-calendar"
                                        Readonly
                                        @attributes="@context.Attrs">
                            </MTextField>
                        </ActivatorContent>
                        <ChildContent>
                            <MDatePicker @bind-Value="date"
                                         NoTitle
                                         Scrollable>
                                <MSpacer></MSpacer>
                                <MButton Text
                                         Color="primary"
                                         OnClick="() => visible = false">
                                    Cancel
                                </MButton>
                                <MButton Text
                                         Color="primary"
                                         OnClick="() => { trip.start = date.ToShortDateString(); visible = false;}">
                                    OK
                                </MButton>
                            </MDatePicker>
                        </ChildContent>
                    </MMenu>
                </MCol>

                <MCol Cols="3">
                    <MMenu @bind-Value="visible2"
                           CloseOnContentClick="false"
                           OffsetY
                           MinWidth="290">
                        <ActivatorContent>
                            <MTextField @bind-Value="trip.end"
                                        Label="End date"
                                        PrependIcon="mdi-calendar"
                                        Readonly
                                        @attributes="@context.Attrs">
                            </MTextField>
                        </ActivatorContent>
                        <ChildContent>
                            <MDatePicker @bind-Value="date2"
                                         NoTitle
                                         Scrollable>
                                <MSpacer></MSpacer>
                                <MButton Text
                                         Color="primary"
                                         OnClick="() => visible2 = false">
                                    Cancel
                                </MButton>
                                <MButton Text
                                         Color="primary"
                                         OnClick="() => { trip.end = date2.ToShortDateString(); visible2 = false; }">
                                    OK
                                </MButton>
                            </MDatePicker>
                        </ChildContent>
                    </MMenu>
                </MCol>
            </MRow>
        </MExpansionPanelContent>
    </MExpansionPanel>
</MExpansionPanels>

@code {

    DateOnly date = DateOnly.FromDateTime(DateTime.Now);
    DateOnly date2 = DateOnly.FromDateTime(DateTime.Now);

    List<string> locations = new() { "Australia", "Barbados", "Chile", "Denmark", "Ecuador", "France" };

    Trip trip = new();

    bool visible = false;
    bool visible2 = false;

    class Trip
    {
        public string name { get; set; }
        public string location { get; set; }
        public string start { get; set; }
        public string end { get; set; }
    }

}
